<script setup lang="ts">
import { reactive, ref,h } from "vue";
import { ElTabs, ElTabPane, ElButton,ElSelect,ElOption,ElSelectV2 } from "element-plus";
import Nifi from "../../nifi";
// @ts-ignore
import ConfigElem from "./config.vue"
import ListElem from "./list.vue"
import { IPackNifi } from "src/inter";
import AddContextElem from "./addContext.vue"
import { t } from "../../i18n/index"

const props = defineProps<{ nifi: Nifi, search?: string, id?: string, box: IPackNifi.DialogEl }>()
const nifi = props.nifi;
const { id = nifi.group.component?.parameterContext?.id, search, box } = props;
// @ts-ignore
const name = nifi.flow.parameterContexts.find((d: any) => d.id == id)?.component?.name
//
const tabs = reactive<{ id: string, name: string, search?: string }[]>([{ id: id, name, search }])
//
const activeName = ref(id)

// 参数上下文选项初始化
const modelContext = ref([id])
const parameterContextOptions = reactive<any[]>(nifi.flow.parameterContexts.map((d: any) => ({ label: d.component.name, value: d.component.id,disabled:d.component.id == id })))
const refresh = () => {
    nifi.flow.refreshParameterContexts().then(() => {
        const ops: any[] = nifi.flow.parameterContexts.map((d: any) => ({ label: d.component.name, value: d.component.id,disabled:d.component.id == id }));
        parameterContextOptions.length = 0;
        parameterContextOptions.push(...ops)
    })
}

const handleContextChange = (d:any) => {
    const s = new Set(d)
    const arr:any = []
    if(s.size > 0){
        activeName.value = d[d.length - 1]
    }
    for(const item of new Array<any>().concat(tabs,parameterContextOptions)){
        const id = item.id || item.value;
        if(s.has(id)){
            arr.push(item.id ? item : {id:item.value,name:item.label})
            s.delete(id);
        }
    }
    // const arr = new Array<any>().concat(tabs,parameterContextOptions).filter(e => d.includes(e.id || e.value)).map(t => t.name ? t : {name:t.label,id:t.value})
    tabs.length = 0;
    tabs.push(...arr)
}

const handleGoTo = (id: string, name: string, search?: string) => {
    const t = tabs.find(d => d.id == id);
    if (t) {
        t.search = search;
    }
    else {
        tabs.push({ id, name, search })
    }
    activeName.value = id;
    modelContext.value.push(id)
}

const handleDel = (id:string) => {
    const i = tabs.findIndex(t => t.id == id)
    tabs.splice(i,1);
    modelContext.value = tabs.map(t => t.id)
    if(activeName.value == id){
        activeName.value = modelContext.value[0]
    }
}

const handleClose = () => {
    box.close();
}

const handleAddContext = () => {
    nifi.box.dialog((box) => h(AddContextElem, { nifi, box, names:parameterContextOptions.map(t => t.label),onSubmit:(d) => {
        nifi.Parameters.addContext(d).then(() => {
            refresh();
        })
    } }), { showFooter: false })
}

</script>


<template>
    <div class="w-60vw h-60vh relative flex flex-col">
        <div class="w-full h-40px flex justify-between items-center">
            <div class="flex items-center gap-10">
                <div class="fw-bold">{{ t('param-tabs-title') }}</div>
                <ElSelectV2 style="width:300px" collapse-tags filterable :teleported="false" @change="handleContextChange" v-model="modelContext" multiple :title="t('param-tabs-context-title')" :options="parameterContextOptions"></ElSelectV2>
                <ElButton type="primary" @click.stop="handleAddContext">{{ t('param-tabs-add-context') }}</ElButton>
            </div>
            <div>
                <ElButton type="default" plain @click.stop="handleClose">{{ t('box-close-text') }}</ElButton>
                <!-- <ElButton type="primary" @click.stop="handleSubmit">{{t('box-submit-text')}}</ElButton> -->
            </div>
        </div>
        <div v-if="tabs.length == 0" class="flex-1  overflow-hidden" ></div>
        <ElTabs v-else v-model="activeName" class="flex-1  overflow-hidden">
            <template #add-icon>
                <ElButton>
                    <div class="i-fluent:add-12-filled w-1em h-1em"></div>
                </ElButton>
            </template>
            <template v-for="t in tabs" :key="t.id">
                <ElTabPane class="h-full" :label="t.name" :name="t.id">
                    <template #label>
                        <div class="flex items-center gap-10px">
                            <span>{{ t.name }}</span>
                            <div v-if="id != t.id" @click.stop="handleDel(t.id)" class="i-ri:close-line c-#aaa op-70 hover-op-100"></div>
                        </div>
                    </template>
                    <ListElem :nifi="nifi" :id="t.id" :search="t.search" :box="box" @goTo="handleGoTo"></ListElem>
                </ElTabPane>
            </template>
        </ElTabs>
    </div>
</template>